<template>
    <div>
        <div class="slideshow_carousel" ref="carousel">
            <div class="slideshow_temp">
                <ul class="slideshow_slides" ref="slides">
                    <li id="slide-1" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img1"
                        />
                    </li>
                    <li id="slide-2" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img2"
                        />
                    </li>
                    <li id="slide-3" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img3"
                        />
                    </li>
                    <li id="slide-4" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img4"
                        />
                    </li>
                    <li id="slide-5" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img5"
                        />
                    </li>
                    <li id="slide-6" class="slide">
                        <img
                            src="https://tse1-mm.cn.bing.net/th/id/R-C.2f34d3468a03f05034bcd7370cd92a1e?rik=iI9T7L7WAIGUVA&riu=http%3a%2f%2fpic27.nipic.com%2f20130224%2f11879003_235236715001_2.jpg&ehk=50uR%2bSONk4VbYasUPEN0U8tyJQnnfsyyVaooBEdnu7w%3d&risl=&pid=ImgRaw&r=0"
                            alt="img6"
                        />
                    </li>
                </ul>
            </div>
            <div class="number">{{count}}/6</div>
            <ul class="slideshow_nav-arrows" ref="nav-arrows">
                <li class="arrow-left"></li>
                <li class="arrow-right"></li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    name: "slideshow",
    mounted() {
        this.tupian = document.querySelector(".slideshow_carousel");
        console.log(this.tupian);
        this.priewPicture();
        this.that = this;
    },
    data() {
        return {
            tupian: null,
            next: null,
            isFirst: true,
            count: 1
        };
    },
    props: ["clearTimer"],
    watch: {
        clearTimer: {
            handler(newValue, oldValue) {
                let that = this;
                console.log("监听改变");

                //当弹出框关闭后清除定时器
                if (newValue) {
                    clearInterval(that.tupian.timer);
                    that.tupian.timer = null;
                    console.log(that.tupian.timer)
                } else if (!that.isFirst) {
                    clearInterval(that.tupian.timer); //先清除定时器
                    that.tupian.timer = null;
                    that.tupian.timer = setInterval(function () {
                        that.next.click();
                    }, 3000);
                }
            },
            deep: true,
        },
    },
    methods: {
        //封装动画函数
        animate(obj, target) {
            obj.timer = setInterval(function () {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                } else {
                    obj.temp = (target - obj.offsetLeft) / 10;
                    obj.mov =
                        obj.temp < 0
                            ? Math.floor(obj.temp)
                            : Math.ceil(obj.temp);
                    obj.style.left = obj.offsetLeft + obj.mov + "px";
                }
            }, 3);
        },

        //查看图片
        priewPicture() {
            let that = this;

            let prev = document.querySelector(".arrow-left");
            that.next = document.querySelector(".arrow-right");
            let tupianWidth = that.tupian.offsetWidth;
            let num = 0;
            that.count = 1;

            //鼠标经过停止定时器
            that.tupian.addEventListener("mouseenter", function () {
                clearInterval(that.tupian.timer);
                that.tupian.timer = null;
            });

            //鼠标离开开启定时器
            that.tupian.addEventListener("mouseleave", function () {
                that.tupian.timer = setInterval(function () {
                    that.next.click();
                }, 2000);
            });

            //动态生成小圆圈
            let tupianUl = that.tupian.querySelector("ul");
            let tupianLis = that.tupian.querySelector("ul").children;
            // let pronav = that.tupian.querySelector(".slideshow_nav-dots");

            // for (let i = 0; i < tupianLis.length; i++) {
            //     let li = document.createElement("li");
            //     pronav.appendChild(li);
            //     li.setAttribute("index", i);

            //     //给li添加点击事件
            //     pronav.children[i].addEventListener("click", function () {
            //         for (i = 0; i < pronav.children.length; i++) {
            //             pronav.children[i].className = "";
            //         }
            //         this.className = "active";
            //         //将小圆点和图片移动联系起来
            //         let index = this.getAttribute("index");
            //         num = index; //将小圆圈的索引号与按钮联系起来，不然按钮的值一直从0开始数
            //         that.animate(tupianUl, -index * tupianWidth); //注意是向左走，由于当前tupianUl的offsetLeft为0，所以要用负的让它向左走
            //     });
            // }

            // pronav.children[0].className = "active";
            //克隆第一张图片实现无缝滚动(此操作要写在动态生成小圆圈的后面，否则会对一个小圆圈)
            let first = tupianLis[0].cloneNode(true);
            tupianUl.appendChild(first);

            //点击右侧按钮实现图片移动
            that.next.addEventListener("click", function () {
                if (num == tupianUl.children.length - 1) {
                    tupianUl.style.left = 0;
                    num = 0;
                }
                num++;

                that.animate(tupianUl, -num * tupianWidth);

                //使右键按钮按下的次数与小圆圈联系起来 实现小圆圈的状态和按键一致
                that.count = num + 1;

                if (num == tupianUl.children.length - 1) {
                    that.count = 1;
                }
                // for (let i = 0; i < pronav.children.length; i++) {
                //     pronav.children[i].className = "";
                // }
                // pronav.children[cicle].className = "active";
            });

            //开启定时器
            that.tupian.timer = setInterval(function () {
                that.next.click();
            }, 2000);
            that.isFirst = false

            // 点击左侧按钮实现图片移动
            prev.addEventListener("click", function () {
                if (num == 0) {
                    num = tupianUl.children.length - 1;
                    tupianUl.style.left = -(num * tupianWidth); //使图片快速移动到克隆的那一张后实现下面的动画
                }

                num--;

                that.animate(tupianUl, -num * tupianWidth);
                //使右键按钮按下的次数与小圆圈联系起来 实现小圆圈的状态和按键一致

                that.count = num + 1;

                if (num == tupianUl.children.length - 1) {
                    that.count = 1;
                }
                // for (let i = 0; i < pronav.children.length; i++) {
                //     pronav.children[i].className = "";
                // }

                // pronav.children[cicle].className = "active";
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.slideshow_carousel {
    --carousel-width: 600px;
    --carousel-height: 400px;
    --navdots-height: 24px;
    --active-index: 0;
    margin: 5px auto;
    // main function - sliding
    position: relative;
    display: flex;

    flex-direction: column;
    width: var(--carousel-width);
    height: var(--carousel-height);
    .slideshow_temp {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        .slideshow_slides {
            height: 100%;
            position: absolute;
            display: flex;
            .slide {
                padding: 0;
                margin: 0;
                img {
                    width: var(--carousel-width);
                    height: calc(
                        var(--carousel-height) - var(--navdots-height)
                    );
                    scroll-snap-align: start;
                }
            }
        }
    }

    // dots
    .slideshow_nav-dots {
        display: flex;
        justify-content: space-around;
        height: var(--navdots-height);
        padding: 20px 0 0 0;
        margin: 0;
        list-style-type: none;

        li {
            position: relative;
            display: block;
            width: 12px;
            height: 50%;

            &::before {
                position: absolute;
                content: "";
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
            }

            &:hover::before {
                background: rgba(0, 0, 0, 0.4);
            }

            &.active::before {
                background: rgba(0, 0, 0, 0.6);
            }
        }
    }

    // arrows
    .slideshow_nav-arrows {
        margin: 0;
        list-style-type: none;

        li {
            position: absolute;
            bottom: calc(50%);
            width: 2em;
            height: 2em;
            border: 5px solid black;
            cursor: pointer;

            &.arrow-left {
                left: -50px;
                border-right-color: transparent;
                border-bottom-color: transparent;
                transform: rotate(-45deg);
                transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
            }

            &.arrow-right {
                right: -50px;
                border-left-color: transparent;
                border-bottom-color: transparent;
                transform: rotate(45deg);
                transition: 1s cubic-bezier(0.2, 1, 0.3, 1);
            }

            &.arrow-left::before {
                position: absolute;
                content: "";
                top: calc(-13%);
                left: calc(-15%);
                width: inherit;
                height: inherit;
                border: inherit;
            }

            &.arrow-left:hover {
                border-left-color: #e74c3c;
                border-top-color: #e74c3c;
            }

            &.arrow-left:hover::before {
                border-left-color: #e74c3c;
                border-top-color: #e74c3c;
                animation: fadeToLeft 2.5s cubic-bezier(0.2, 1, 0.3, 1) infinite;
            }

            &.arrow-right::before {
                position: absolute;
                content: "";
                top: calc(-13%);
                left: calc(-15%);
                width: inherit;
                height: inherit;
                border: inherit;
            }

            &.arrow-right:hover {
                border-right-color: #e74c3c;
                border-top-color: #e74c3c;
            }

            &.arrow-right:hover::before {
                border-right-color: #e74c3c;
                border-top-color: #e74c3c;
                animation: fadeToRight 2.5s cubic-bezier(0.2, 1, 0.3, 1)
                    infinite;
            }
        }
    }
    .number {
        display: flex;
        justify-content: flex-end;
        font-size: 28px;
    }
}

@keyframes fadeToLeft {
    5% {
        transform: translate(10%, 10%);
    }

    to {
        transform: translate(-100%, -100%);
        opacity: 0;
    }
}

@keyframes fadeToRight {
    5% {
        transform: translate(-10%, 10%);
    }

    to {
        transform: translate(100%, -100%);
        opacity: 0;
    }
}
</style>